{% extends "osr-style/pages/based/based.html" %}
{% block title %}{{_("DEMO")}}-{% endblock %}
{% block content %}
<div id="app">
    <div class="row osr-page">
        <section class="osr-panel">
            <div class="col-md-8">
                <div id="myCarousel" class="osr-carousel carousel slide" data-interval="4000">
                    <!-- 轮播（Carousel）指标 -->
                    <!--<ol class="carousel-indicators">-->
                        <!--<li data-target="#myCarousel" data-slide-to="0" class="active"></li>-->
                        <!--<li v-for="(show_img,index) in carousel.slice(1)" data-target="#myCarousel" :data-slide-to="index+1"></li>-->
                    <!--</ol>-->
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <a v-if="index==0" class="item active" :href="show_img.link" v-for="(show_img,index) in carousel">
                            <img class="osr-carousel-img" :src="show_img.url" alt="show_img.title">
                            <div class="osr-carousel-caption carousel-caption" v-html="show_img.text_html"></div>
                            <div v-if="show_img.title" class="img-title">{[show_img.title]}</div>
                        </a>

                        <a v-if="index!=0" class="item" :href="show_img.link" v-for="(show_img,index) in carousel">
                            <img class="osr-carousel-img" :src="show_img.url" alt="show_img.title">
                            <div class="osr-carousel-caption carousel-caption" v-html="show_img.text_html"></div>
                            <div v-if="show_img.title" class="img-title">{[show_img.title]}</div>
                        </a>


                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="pull-left left osr-carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="pull-right right osr-carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <!--推荐位１-->
            <div class="col-md-4 visible-md visible-lg">
                <div v-for="rec in rec_1">
                    <a :href="rec.link" target="_blank">
                        <img class="osr-carousel-img" :src="rec.url"  alt="rec.title">
                        <div class="img-title">{[rec.title]}</div>
                    </a>
                </div>
            </div>
            <!--推荐位1-->
            {% include 'osr-style/pages/_index_s2.html' %}
        </section>
    </div>


</div>
<script src="/theme/static/js/markdown/marked.min.js?v={{g.site_global.site_config.STATIC_FILE_VERSION}}"></script>
<link href="/theme/static/css/highlight-style-github.css?v={{g.site_global.site_config.STATIC_FILE_VERSION}}" rel="stylesheet">
<script src="/theme/static/js/highlight.js?v={{g.site_global.site_config.STATIC_FILE_VERSION}}"></script>
<script>

    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{
            carousel:[{}],
            rec_1:[{}],
            rec_2:[],
            rec_3:[{}],
            rec_4:[{}],
            posts:{datas:[]},
            sort:"t-desc",
            pages:[],
            page:1,
            img_w_h:"?w=0&h=120",
      },
      filters: {
            formatDate: function (time) {
              return irrformatDate(time, "yyyy-MM-dd hh:mm");
            }
      }
    })

    // 加载完页面执行
    $(document).ready(function(){
        get_global();
        get_posts(vue.page, vue.sort);
    })

    function get_global(){
        var conditions = [
             {
                type:"image",
                name_regex:"home-carousel-[0-9]+",
                result_key:"home_carousel"
             },
             {
                type:"image",
                name_regex:"home-rec1-[0-9]+",
                result_key:"rec_1"
             },
             {
                type:"image",
                name_regex:"home-rec2-*[0-9]*",
                result_key:"rec_2"
             },
             {
                type:"text",
                name_regex:"home-rec3-*[0-9]*",
                result_key:"rec_3"
             },
             {
                type:"image",
                name_regex:"home-rec4-[0-9]+",
                result_key:"rec_4"
             },

        ];
        var d ={
            conditions:JSON.stringify(conditions)

        }

        var result = osrHttp("GET","/api/global/media", d, args={not_prompt:true});
        result.then(function (r) {
            vue.carousel = r.data.medias.home_carousel;
            vue.rec_1 = r.data.medias.rec_1;
            vue.rec_2 = r.data.medias.rec_2!=[]?r.data.medias.rec_2[0]:[];
            vue.rec_3 = r.data.medias.rec_3;
            vue.rec_4 = r.data.medias.rec_4;
        });
    }

    //获取
    function get_posts(page, sort){

        vue.sort = sort;
        vue.page = page;
        if(sort=="t-desc"){
            sort = [{"issue_time":-1},{"update_time":-1}];
        }else if(sort=="t-asc"){
           sort = [{"issue_time":1},{"update_time":1}];
        }else{
            sort = [{"like": -1}, {"comment_num": -1}, {"pv": -1},{"issue_time": -1}];
        }

        d = {
            page:page,
            pre:10,
            status:"is_issued",
            sort:JSON.stringify(sort),
            unwanted_fields:JSON.stringify(["content", "imgs"])
        }

        var result = osrHttp("GET","/api/post", d, args={not_prompt:true});
        result.then(function (r) {
            $.each(r.data.posts.datas, function(index, value) {
                if(value.editor=="markdown"){
                    r.data.posts.datas[index]["brief_content"] = marked(value.brief_content);
                }
            });
            vue.pages = paging(page_total=r.data.posts.page_total, current_page=r.data.posts.current_page);
            if(vue.page!=1){
                var old_datas = vue.posts.datas;
                vue.posts = r.data.posts;
                $.merge(old_datas, r.data.posts.datas);
                vue.posts.datas = old_datas;
            }else{
                vue.posts = r.data.posts;
            }
        });

    }

</script>

{% endblock %}
